 /**
 * @file _rainbow-cyber.scss
 * @description 彩虹赛博主题 - 灵感来自彩虹色头发的赛博朋克角色
 * 结合了彩虹渐变色彩、蓝紫色背景和未来科技感的设计元素
 */

/* Rainbow Cyber Theme - Dynamic and Colorful */
html.theme-rainbow-cyber {
  // 背景 - 蓝紫色渐变基调
  --bg-color: #0d0d1a;
  --bg-color-page: #0a0a1f;
  --bg-image: radial-gradient(ellipse at 20% 20%, rgba(255, 51, 185, 0.15) 0%, transparent 40%), 
              radial-gradient(ellipse at 80% 80%, rgba(51, 255, 185, 0.15) 0%, transparent 40%);
  --bg-color-secondary: rgba(15, 15, 30, 0.7);
  --bg-color-tertiary: #14142a;
  
  // 文本颜色
  --text-color: #e0e0ff;
  --text-color-light: rgba(224, 224, 255, 0.75);
  --text-color-secondary: #a0a0ff;
  --text-color-disabled: rgba(224, 224, 255, 0.4);
  --text-color-on-primary: #ffffff;
  
  // 主色调
  --primary-color: #ff33b9; // Hot Pink
  --primary-color-rgb: 255, 51, 185;
  --primary-color-hover: #33ffb9; // Mint Green
  --primary-color-light: rgba(255, 51, 185, 0.15);
  --primary-color-dark: #cc0088;
  
  // 辅色调
  --secondary-color: #33ffb9; // Mint Green
  
  // 状态色
  --success-color: var(--secondary-color);
  --danger-color: #ff3366;
  --warning-color: #ffaa33;
  --info-color: #33aaff;
  
  // 边框和圆角
  --border-color: rgba(81, 255, 136, 0.2);
  --border-color-light: rgba(81, 255, 136, 0.1);
  --border-color-emphasis: rgba(81, 255, 136, 0.5);
  --border-radius-base: 8px;
  --border-radius-large: 20px;
  --border-radius-small: 8px;
  
  // 阴影与辉光
  --box-shadow-base: 0 4px 20px rgba(0, 0, 0, 0.4);
  --primary-glow: 0 0 5px #fff, 0 0 10px var(--primary-color), 0 0 20px var(--primary-color), 0 0 30px var(--secondary-color);
  --secondary-glow: 0 0 5px #fff, 0 0 10px var(--secondary-color), 0 0 20px var(--secondary-color);

  // 字体
  --font-family-special: 'Orbitron', monospace;

  // 玻璃效果
  --backdrop-blur: 12px;
  --glass-bg: rgba(15, 15, 30, 0.6);
  --glass-border: rgba(81, 255, 136, 0.25);
  
  // 禁用状态
  --disabled-bg-color: #14142a;
  --disabled-border-color: rgba(255, 255, 255, 0.1);
  --disabled-text-color: var(--text-color-disabled);

  // 链接状态
  --link-color: var(--primary-color);
  --link-hover-color: var(--secondary-color);
  --link-visited-color: #ff66cc;

  // 无障碍
  --focus-ring: 0 0 0 2px var(--bg-color-secondary), 0 0 0 4px var(--primary-color), 0 0 10px rgba(255, 51, 185, 0.5);
  --hover-overlay: rgba(81, 255, 136, 0.1);
  --active-overlay: rgba(81, 255, 136, 0.2);

  // 滚动条
  --scrollbar-track: #1a1a2a;
  --scrollbar-thumb: var(--primary-color);
  --scrollbar-thumb-hover: var(--secondary-color);

  // 特殊效果变量 - 彩虹相关
  --rainbow-gradient: linear-gradient(90deg, #ff33b9, #ff3366, #ffff33, #33ff66, #33b9ff, #9b33ff, #ff33b9);
}

// 高对比度模式 - 保持彩虹科技感
@media (prefers-contrast: high) {
  body.theme-rainbow-cyber {
    --text-color: #ffffff;
    --text-color-secondary: #00ddff;
    --border-color-emphasis: #0099cc;
    --primary-color: #00ffff;
    --focus-ring: 0 0 0 3px var(--primary-color);
  }
}

// 减少动画 - 无障碍考虑
@media (prefers-reduced-motion: reduce) {
  body.theme-rainbow-cyber {
    .axiom-button[type="primary"],
    .axiom-card::before,
    .rainbow-title,
    .mobile-header .title {
      animation: none;
    }
    
    &.with-hologram-scan::after {
      animation: none;
    }
  }
}